<template>
  <!--新增/修改 收获的地址-->
  <uni-popup ref="modifyAddress">
    <uni-popup-dialog
        type="info"
        cancelText="取消"
        confirmText="确认"
        :title="title"
        @close="cancel"
        @confirm="submitForm"
        before-close>
      <template v-slot="content">
        <uni-forms
            ref="form"
            :modelValue="form"
            :rules="rules"
            :label-width="75" type="line" label-align="right">
          <uni-forms-item label="收货人" name="name">
            <uni-easyinput v-model="form.name" type="text" placeholder="请输入收货人名称" :clearable="true" maxlength="25"/>
          </uni-forms-item>
          <uni-forms-item label="手机号码" name="mobile">
            <uni-easyinput v-model="form.mobile" type="number" placeholder="请输入手机号码" :clearable="false" maxlength="11"/>
          </uni-forms-item>
          <uni-forms-item label="所在地区" name="selectedOptions">
            <pick-regions @getRegion="handleGetRegion">
              <uni-easyinput
                  v-model="regionName"
                  @focus="hideInput"
                  type="text"
                  placeholder="请选择省市区"
                  :clearable="false"
                  suffixIcon="bottom"/>
            </pick-regions>
          </uni-forms-item>
          <uni-forms-item label="详细地址" name="address" style="margin-bottom: 10rpx;">
            <uni-easyinput v-model="form.address" type="textarea" placeholder="请输入详细地址" maxlength="150"/>
          </uni-forms-item>
          <uni-forms-item label="默认地址" name="isDefault">
            <switch
                color="#00a660"
                style="transform:scale(0.7);padding-top: 14rpx;"
                @change="switchChange"
                :checked="form.isDefault == 1 ? true : false"
            />
          </uni-forms-item>
        </uni-forms>
      </template>
    </uni-popup-dialog>
  </uni-popup>
</template>

<script>

import pickRegions from '@/components/pick-regions/pick-regions'
import {addStaffAddress, updateStaffAddress} from "@/api/ec/person/user/staffAddress";

export default {
  props: {},
  components: {pickRegions},
  data() {
    return {
      // 省市区
      region: [],
      // 标题
      title: '',
      // 表单
      form: {},
      // 效验
      rules: {
        name: {
          rules: [
            {required: true, errorMessage: "收货人不能为空", trigger: "blur"},
            {min: 2, max: 25, errorMessage: '最多输入2-25个汉字或字符之间，请勿输入特殊字符', trigger: 'blur'}]
        },
        mobile: {
          rules: [
            {required: true, errorMessage: "请输入联系电话", trigger: "blur"},
            {pattern: /^1[3456789]\d{9}$/, errorMessage: "请输入正确的手机号码", trigger: "blur"}]
        },
        selectedOptions: {
          rules: [
            {required: true, errorMessage: "请选择省/市/区"}]
        },
        address: {
          rules: [
            {required: true, errorMessage: "请输入详细地址信息", trigger: "blur"},
            {min: 4, max: 200, errorMessage: '最多输入5-200个汉字或字符，请勿输入特殊字符', trigger: 'blur'}]
        },
      },
    };
  },
  computed: {
    regionName: {
      get() {
        // 转为字符串
        return this.region.map(item => item.name).join(' / ')
      },
      set(newValue) {
        // 回显地址信息
      },
    }
  },
  methods: {
    /** 隐藏键盘 */
    hideInput() {
      uni.hideKeyboard()
    },
    /** 获取选择省市区 */
    handleGetRegion(region) {
      uni.hideKeyboard()
      this.region = region
      this.form.district = region[2].code
      this.form.region = region[0].name + region[1].name + region[2].name
      this.form.province = region[0].code + '0000'
      this.form.city = region[1].code + '00'
      const arr = []
      const editArr = []
      editArr.push(region[0].name, region[1].name, region[2].name)
      this.form.editArr = editArr
      arr.push(this.form.province, this.form.city, this.form.district)
      this.form.selectedOptions = arr
    },
    /** 回显省市区 */
    handleBindRegion() {
      const arr = [];
      arr.push(this.form.province, this.form.city, this.form.district);
      this.form.selectedOptions = arr;
      // 省市区的正则 回显省市区
      let reg = /.+?(省|市|自治区|自治州|县|区)/g;
      this.region = this.form.region.match(reg);
      this.region = this.region.map(item => {
        return {name: item}
      });
    },
    /** 打开弹出框 */
    toOpenDialog(form) {
      this.$refs.modifyAddress.open('center')
      if (!!form) {
        this.form = form;
        this.title = "修改收货地址";
        this.handleBindRegion();
      } else {
        this.form = {isDefault: 0};
        this.region = [];
        this.title = "新增收货地址";
      }
    },
    /** 取消按钮 */
    cancel() {
      this.$refs.modifyAddress.close()
    },
    /** 设为默认地址 */
    switchChange(e) {
      this.form.isDefault = e.detail.value == true ? 1 : 0;
    },
    /** 修改登录密码,确定按钮 */
    submitForm() {
      this.$refs.form.validate().then(valid => {
        if (valid) {
          // 修改地址
          if (this.form.id != null) {
            uni.showLoading({title: '加载中...', mask: true});
            updateStaffAddress(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              uni.hideLoading()
              this.cancel();
              this.$emit("success", "");
              this.$modal.msgSuccess("修改成功！");
            }).catch(() => {
              uni.hideLoading()
            });
          } else {
            console.log(this.form)
            // 新增地址
            addStaffAddress(this.form).then(response => {
              uni.hideLoading()
              this.cancel();
              this.$emit("success", "");
              this.$modal.msgSuccess("新增成功！");
            }).catch(() => {
              uni.hideLoading()
            });
          }
        }
      });
    },
  }
};
</script>
<style scoped lang="scss">

//::v-deep .uni-forms-item .is-required {
//  display: none;
//}

::v-deep .uni-popup-dialog {
  width: 100%;
}

::v-deep .uni-dialog-content {
  padding-bottom: 0;
  display: block;

}
</style>
